<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
        	var ws;
        	var datalist = [['score', 'amount', 'product']];
        	function abc() {
        		ws = new WebSocket("ws://localhost:8080/111/wohenshuai")
        		ws.onopen = function() {
        			
        		};
        		ws.onmessage = function(event) {
        			var result = JSON.parse(event.data);
					for(var i = 0; i< result.length;i++) {
						var arr = new Array();
						arr.push(result[i].p1);
						arr.push(result[i].p2);
						arr.push(result[i].p3);
						datalist.push(arr);
					}
					init();
        		};
        		ws.onclose = function() {
        			
        		};
        		ws.onerror = function() {
        			
        		}
        	}
			function init() {
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				
				var option;
				
				
				
				option = {
				    dataset: {
				        source: datalist
				    },
				    grid: {containLabel: true},
				    xAxis: {name: '人数'},
				    yAxis: {type: 'category'},
				    visualMap: {
				        orient: 'horizontal',
				        left: 'center',
				        min: 10,
				        max: 100,
				        text: ['100%', '0%'],
				        // Map the score column to color
				        dimension: 0,
				        inRange: {
				            color: ['#65B581', '#FFCE34', '#FD665F']
				        }
				    },
				    series: [
				        {
				            type: 'bar',
				            encode: {
				                // Map the "amount" column to X axis.
				                x: 'amount',
				                // Map the "product" column to Y axis
				                y: 'product'
				            }
				        }
				    ]
				};
				
				if (option && typeof option === 'object') {
				    myChart.setOption(option);
				}
			}


        </script>
    </head>
    <body style="height: 100%; margin: 0">
        
		<div id="app"></div>
			<div id="container" style="height: 100%"></div>
		
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script type="text/javascript" src="../js/vue.min.js" ></script>
        <script type="text/javascript" src="../js/axios.min.js" ></script>
        <script type="text/javascript">
        	var vue = new Vue({
        		el: '#app',
        		data: {
        		},
        		created: function() {
        			//发送axios请求获取数据
        				axios.get("../count")
						.then((res)=>{
							alert(res.data)
							var result = res.data;
							for(var i = 0; i< result.length;i++) {
								var arr = new Array();
								arr.push(result[i].p1);
								arr.push(result[i].p2);
								arr.push(result[i].p3);
								datalist.push(arr);
							}
							init();
							abc();
							alert("awsedrftgyh");
						})
						.catch((error)=>{
							alert("网络异常");
						})
        		}
        		
        	})
        </script>
    </body>
</html>
    